<%--
  Created by IntelliJ IDEA.
  User: Acer
  Date: 2021/1/8
  Time: 10:19
  To change this template use File | Settings | File Templates.
--%>

<%--<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>--%>
<%--<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>--%>
<%--<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>--%>
<%--<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>--%>
<%--<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <%--    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">--%>
    <%--    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>--%>
    <%--    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>--%>
    <%--    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>--%>
    <%--    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>--%>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/webjars/bootstrap/4.5.3/css/bootstrap.min.css">
    <script src="${pageContext.request.contextPath}/webjars/jquery/3.5.1/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/webjars/popper.js/1.16.0/popper.js"></script>
    <script src="${pageContext.request.contextPath}/webjars/bootstrap/4.5.3/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/webjars/vue/2.6.11/vue.min.js"></script>
    <title>Title</title>
</head>
<body>

<div class="container">
    <button class="btn btn-primary" id="btn01">load_data</button>

    <input id="search01" type="text" class="form-control">
    <p id="check01"></p>
    <p id="show"></p>

    <table class="table table-hover table-active">
        <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>count</th>
            <th>detail</th>
        </tr>
        </thead>
        <tbody id="show_content">

        </tbody>
    </table>
</div>

<script>
    $(function () {
        $("#btn01").click(getBooks)
    })

    function getBooks() {
        $.get("${pageContext.request.contextPath}/api/rest/book/list", function (data) {
            let htmld = ""
            for (let i = 0; i < data.length; i++) {
                htmld += "<tr>" +
                    "<td>"+ data[i].bookId + "</td>" +
                    "<td>"+ data[i].bookName + "</td>" +
                    "<td>"+ data[i].bookCount + "</td>" +
                    "<td>"+ data[i].detail + "</td>" +
                    "</tr>"
            }
            $("#show_content").html(htmld)
        })
    }
</script>





</body>
</html>
